<!-- 区间标准设置 -->
<template>
    <div class="profitStandardSetting">
        <div>
            标准名称：
            <el-input style="width: 200px" v-model="tableConfig.searchInput" placeholder="请输入标准名称"></el-input>
            <el-button style="margin-left: 20px" type="primary" @click="searchData" id="monitorEnter">查询</el-button>
            <el-button type="primary" @click="newIterval">新建</el-button>
        </div>

        <el-table
                :data="rangeList"
                highlight-current-row
                style="width: 100%;margin-top: 20px;">
            <el-table-column
                    type="index"
                    align="center"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    align="center"
                    property="name"
                    label="标准名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    property="version"
                    label="版本号"
                    width="120">
            </el-table-column>
            <el-table-column
                    width="100"
                    align="center"
                    label="区间范围">
                <template slot-scope="scope">
                    <a href="javascript:;;" @click="getRangeDetailList(scope.row.id)">查看</a>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    property="createTime"
                    label="创建时间"
                    width="150"
            >
            </el-table-column>
            <el-table-column
                    align="center"
                    property="creatorName"
                    width="150"
                    label="创建人">
            </el-table-column>
        </el-table>

        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>
        <!-- 区间范围弹框 -->
        <el-dialog
                title="查看区间范围"
                :visible.sync="intervalDialogVisible"
                width="35%">
            <div class="mb20">
                类型：
                <el-select v-model="intervalDialogListIndex" placeholder="请选择">
                    <el-option :key="0" label="普通" :value="0"></el-option>
                    <el-option :key="1" label="包销" :value="1"></el-option>
                </el-select>
            </div>

            <el-table
                    :data="intervalDialogList[intervalDialogListIndex]"
                    border
                    highlight-current-row
            >
                <el-table-column
                        align="center"
                        property="content"
                        label="计提区间">
                </el-table-column>
            </el-table>
            <span slot="footer">
                <el-button @click="intervalDialogVisible = false">关闭</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath'

    export default {
        name: "profitStandardSetting",
        title:'利润标准设置',
        data() {
            return {
                intervalDialogVisible: false,
                rangeList: [],
                tableConfig: {
                    searchInput: "",
                    pageNum: 1,
                    pageSize: 10,
                    totalSize: 10
                },
                intervalDialogList: [[], []],
                intervalDialogListIndex: 0
            }
        },
        created() {

        },
        activated(){
            this.searchData();
        },
        mounted() {
            this.getRangeList()
        },
        methods: {
            searchData() {
                this.tableConfig.pageNum = 1;
                this.getRangeList();
            },
            getRangeList() {
                this.axios.post(api.profitStandardSettingList, JSON.stringify({
                    pageSize: this.tableConfig.pageSize,
                    pageNum: this.tableConfig.pageNum,
                    name: this.tableConfig.searchInput
                })).then((res) => {
                    if (res) {
                        this.rangeList = res.data.data.data;
                        this.tableConfig.totalSize = res.data.data.total
                    }
                })
            },
            getRangeDetailList(rangeId) {
                this.intervalDialogList = [[],[]]
                this.axios.post(api.profitStandardSettingDetail, {id: rangeId}).then((res) => {
                    res.data.data.forEach((item) => {
                        this.intervalDialogList[item.labelType - 1].push(item)
                    });
                    this.intervalDialogVisible = true;
                    this.intervalDialogListIndex = 0;
                })
            },
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getRangeList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getRangeList()
            },
            newIterval() {
                this.$router.push({path: "./profitStandardSettingHandle"})
            },
        },
        components: {},
        computed: {}
    }

</script>

<style lang="stylus">
    .intervalDialogList {
        text-align: center;
    }

</style>
